Typography can evoke a feeling, recall a brand, or create an atmosphere. Consider the boldness of the FedEx logo (complete with a sneaky hidden arrow!) or the classic blackletter style of The New York Times' masthead. Consider the layout of your favorite magazine when it comes to editorial typesetting. Consider how different fonts are used across different apps on your phone. However, typography can be jarring, distracting, and even unreadable when typography is poor. Consider the last time you were perplexed by sloppy type in an app, misled by signage, or struggled to comprehend an illegible pamphlet or packaging product.
When you think about it, the art and science of typography is the foundation of all communication, such as logos, ad copy, magazine and newspaper headlines, or book chapter headings. Let us discuss more why is typography important.
What Is Typography?
Before taking this course, typography was more of scrolling through a dropdown menu until we found a font that looked like it might work. However, it turns out that there's a lot more to it than that. The art and technique of arranging type, type meaning letters, and characters are known as typography. It's important to note that it's about more than just the design of letters and characters; the arrangement of those letters and characters is also essential. This refers to the choice of point size, line length, and spacing on a single line and across an entire page or piece of work.
What is the Importance of Typography?
Typography is more than just choosing pretty fonts; it's an integral part of UI design. Good typography will create a strong visual hierarchy, provide graphic balance to the website, and set the overall tone for the product. Users should be guided and informed by typography, improving readability and accessibility while also providing a positive user experience. Let's dig deeper into why typography is so important.
∙ Brand Recognition is Enhanced by Typography
Not only will good typography improve the personality of your website, but your visitors will subconsciously begin to associate the typeface featured on your site with your brand. Unique, consistent typography will assist you in establishing a strong user following, establishing trust with your users, and carrying your brand forward.
∙ Decisions are Influenced by Typography
Typography has a significant impact on how users digest and perceive the information conveyed by the typography text. Strong fonts that reinforce the text's message are far more persuasive than weak fonts that do not support the text's message.
∙ Readers are Captivated by Typography
Good typography can mean the difference between a visitor staying on your website for one minute or half an hour. Your website must be visually stimulating and memorable, and typography plays a big part.
The Various Typographic Elements
To get started in typography, you must first master the eight essential elements of typography graphic designs.
1. Typefaces and Fonts
There is some misunderstanding about the distinction between typefaces and fonts, with many people confusing the two. A typeface is a typography design style that includes a variety of characters in various sizes and weights, whereas a font is a graphical representation of a text character. A typeface is a family of related fonts, whereas fonts are the weights, widths, and styles that make up a typeface. Serif, sans-serif, and decorative typefaces are the three most common. A good designer will never use more than three fonts—and will keep decorative fonts to a minimum—to keep the interface uncluttered and streamlined. Most UI designers will pair serif fonts with sans-serif fonts, such as using a serif font for the main body text and a sans-serif font for the title or vice versa.
2. Contrast
Image is taken from Strikingly user’s website
Contrast, like hierarchy, aids in conveying to your readers which ideas or messages you wish to emphasize. By focusing on contrast, you can make your typography text more interesting, meaningful, and attention-grabbing. Most designers experiment with different typefaces, colors, styles, and sizes to create impact and break up the page.
3. Consistency
It is critical to keep your typefaces consistent to avoid a confusing and cluttered interface. When communicating information, it's critical to use the same font style so that your readers understand what they're reading and begin to notice a pattern. While it's acceptable to experiment with hierarchy levels to some extent, it's best to establish and stick to a consistent hierarchy of typefaces (one consistent font for headers, another for subheadings).
4. White Space
White space, also known as 'negative space,' is the space around text or graphics. It is frequently overlooked as a good typography element. It goes unnoticed by users, but proper use of white space ensures that the interface is uncluttered and the text is readable. White space can draw attention to the text and create an aesthetically pleasing overall experience. White space is frequently represented by margins, padding, or areas devoid of text or graphics.
5. Alignment
Image is taken from Strikingly user’s website
The process of unifying and composing text, graphics, and images to ensure equal space, size, and distances between each element is known as alignment. Many UI designers use margins to ensure that their logo, header, and body of text are all aligned. When aligning your user interface, it's a good idea to keep industry standards in mind. Aligning your text to the right will appear counterintuitive to readers who read left to right.
6. Color
Color is one of typography's most exciting elements. This is where designers can get creative and take the interface to the next level. On the other hand, text color should not be taken lightly. Getting your font color right can make the text stand out and convey the tone of the message — however, doing so incorrectly can result in a cluttered interface and text that clashes with the site's colors. Color comprises three major components: value, hue, and saturation. A good designer will know how to balance these three elements so that the text is visually appealing and legible, even for those with visual impairments. Designers will frequently test this by viewing the text in greyscale (without color) and making adjustments if the text is too dark or too light compared to the background color.
7. Hierarchy
One of the most important typography principles is the hierarchy. Typographic hierarchy aims to differentiate between prominent pieces of copy that should be noticed and read first and standard text copy. In an age of short attention spans caused by social media, designers are encouraged to be concise and create typefaces that allow users to consume the necessary information quickly.
Sizing, color, contrast, and alignment can all be used to create a hierarchy. For example, if you have a line of copy that begins with an exclamation mark icon that is red and larger than the previous copy, this is a visual cue to the readers that it is a call to action. Size is the most common example of typographic hierarchy: headings should always be larger than subheadings and standard text.
Typography Tips for Your Website
Now that we've covered the fundamentals of typography, let's move on to selecting typefaces for your interface. It's easy to become overwhelmed when so many different fonts and typefaces to choose from. Making the right decision is about much more than just looking at what looks nice. Here are a few things to think about:
a. Consider Your Personality
What emotions do you want your visitors to have when they first visit your website? Do you want to make your environment more welcoming? Do you want the site to be upscale, inviting, playful, or serious? The typography must reflect the brand's or product's personality. When faced with this challenge, defining the core traits of your brand and beginning to collect typefaces that reflect these traits is a good place to start. From there, you can start to notice a pattern.
b. Consider the Tone
Image is taken from Strikingly user’s website
It's also important to consider how the font complements the message's tone. Choose a less stylized or decorative font that is legible and will limit distraction if you want to convey serious or important information.
c. Don't Skimp on Functionality
The function is just as important as appearance: there's nothing worse than a website that looks nice but is completely illegible, causing you to click the wrong button or take the wrong turn because the instructions were unclear. Set aside style, aesthetic, and voice when deciding which typefaces to include in your interface and consider whether the font is legible, readable, and accessible. Is there a way to read the text without straining? Is there enough differentiation between the characters?
d. Take into Account Performance
Many designers overlook the importance of selecting typefaces compatible with web browsers. Font libraries that are widely used, such as Google Fonts, provide web-based font files that can be rendered flawlessly in a browser. Pro tip: never download more character sets than you need when downloading web fonts. You'll avoid gaining weight this way!
e. Be Inspired
Image is taken from Strikingly user’s website
If you're not sure where to begin, look at what other people are doing. Pay attention to the typography you see around you. Do you see any repeating patterns? Can you identify good and bad typography examples? Following typography hashtags on social media or researching typography on Pinterest will give you a good idea of what's available. You can also get some ideas from these eight typography trends.
f. Allow Some Time for Testing
What is the best way to determine which font to use for your interface? Test, test, and test again! Gathering useful feedback from real users will better understand what works, what doesn't, what is legible, and what feels counterintuitive or clunky.
Presenting Strikingly
Strikingly is a free website builder that allows users to design their own websites. Sounds complicated, doesn't it? No worries. Strikingly is extremely simple to learn, and even those with no prior experience with web development will find it enjoyable. Strikingly includes tools for web designers to add and edit typography. The variety of typefaces and text colors available will astound you. You can use Strikingly to manipulate the spaces around your typography and create visually appealing texts that adhere to good typography design elements. You can mix and match styles to create the typography to make your brand stand out.
Conclusion
Typography is often overlooked, but it is an important part of user interface design. You'll be well on your way to becoming a fantastic UI designer if you master typography! If you're not sure where to begin, go to your favorite websites and start taking notes on their chosen typefaces.
